<template>
	<view class="container">

		<u-alert :title="alertTitle" type = "warning" :description = "alertDescription"></u-alert>

		<u--form labelPosition="left" :model="orderForm" :rules="rules" ref="uForm">
			<u-form-item label="姓名:" prop="playName" borderBottom ref="playName">
				<u--input v-model="orderForm.playName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别:" prop="sex" borderBottom @click="showSex = true;">
				<u--input v-model="orderForm.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="电话:" prop="mobile" borderBottom>
				<u--input v-model="orderForm.mobile" border="none" placeholder="请输入电话"></u--input>
			</u-form-item>
			<u-form-item label="年龄:" prop="age" borderBottom>
				<u-number-box v-model="orderForm.age" border="none" placeholder="请选择年龄"></u-number-box>
			</u-form-item>
			<u-form-item label="身份证:" labelWidth="auto" prop="idCard" borderBottom>
				<u--input v-model="orderForm.idCard" border="none" placeholder="请输入身份证号码"></u--input>
			</u-form-item>
			<u-form-item label="省市区:" prop="prop1" labelWidth="auto" borderBottom>


				<view>
					<picker mode="region" class="picker1" @change="onPickerChange">
						<view style="display: flex;flex-direction: row;">
							<u--input v-model="orderForm.prop1" border="none" disabled disabledColor="#FFFFFF"
								placeholder="请选择你的省市区"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</picker>
				</view>


			</u-form-item>
			<u-form-item label="详细地址:" labelWidth="auto" prop="address" borderBottom>
				<u--input v-model="orderForm.address" border="none" placeholder="请输入你的详细地址"></u--input>
			</u-form-item>

			<u-form-item label="年龄段:" prop="activityGroupName" borderBottom labelWidth="auto" @click="showG = true">
				<u--input v-model="orderForm.activityGroupName" disabled disabledColor="#ffffff" placeholder="请选择年龄段"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="活动类别:" prop="activityTypeName" borderBottom labelWidth="auto" @click="showActivity = true">
				<u--input v-model="orderForm.activityTypeName" disabled disabledColor="#ffffff" placeholder="请选择活动类别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item labelWidth="auto" v-for="(item, index) in orderForm.activityConfig" :key="index"
				:label="item.name + ':'" :prop="'orderForm.activityConfig.'+ item.key" borderBottom :ref="item.key">

				<u--input v-if="item.type == 'textbox'" :placeholder="item.placeholder" v-model="item.value"
					border="none"></u--input>

				<view @click="onActivityConfigChooseFile(index)" v-if="item.type == 'uploadFile'" class="flie">
					<view v-if="item.value==null">上传文件</view>
					<view v-if="item.value">已上传（1）</view>
				</view>

				<view @click="onShowOptions(item, index)" v-if="item.type == 'radio'">
					<view style="display: flex;flex-direction: row;">
						<u--input v-model="item.value" disabled disabledColor="#ffffff" :placeholder="item.placeholder"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>

				</view>


				<u-upload v-if="item.type == 'uploadImage'" :fileList="item.value ? [{url: item.value}] : []"
					@afterRead="afterRead($event, index)" @delete="deletePic($event, index)" name="1" multiple
					:preview-full-image="false" :maxCount="1"></u-upload>

			</u-form-item>



			<u-form-item labelWidth="auto" v-if="orderForm.activityTypeName != null || orderForm.assetType=='文件'"
				label="上传作品:" borderBottom>

				<view @click="onChooseFile2()" v-if="assetList[selectActIndex].name == '文件' ||  orderForm.assetType!=''"
					class="flie">
					<view v-if="orderForm.uploadAsset==null">上传文件</view>
					<view v-if="orderForm.uploadAsset">已上传（1）</view>
				</view>

				<u-upload v-if="assetList[selectActIndex].name == '图片'  || orderForm.assetType=='图片'"
					:fileList="orderForm.uploadAsset ? [{url: orderForm.uploadAsset}] : []"
					@afterRead="afterRead2($event)" @delete="deletePic2($event)" name="1" multiple
					:preview-full-image="false" :maxCount="1"></u-upload>

				<u--input v-if="assetList[selectActIndex].name == '网盘' || orderForm.assetType=='网盘'"
					placeholder="填写网盘地址" v-model="orderForm.uploadAsset" border="none"></u--input>
			</u-form-item>
			<u-form-item labelWidth="auto" label='备注'>
				<u--input v-model="orderForm.remark" placeholder="请输入你的备注"  ></u--input>
			</u-form-item>
			<u-gap height="30" ></u-gap>
		</u--form>

		<view class="btns">

			<view @click="submitOrder"  :class="btnClass">
				 提 交
			</view>
		</view>

		<view class="kong">

		</view>


		<u-action-sheet :show="showSex" :actions="actionSexs" title="请选择性别" @close="showSex = false"
			@select="sexSelect">
		</u-action-sheet>

		<u-action-sheet :show="showOptions" :actions="actions" title="请选择" @close="showOptions = false"
			@select="optionSelect"></u-action-sheet>

		<u-action-sheet :show="showG" :actions="groups" title="请选择年龄段" @close="showG = false"
			@select="optionSelectG"></u-action-sheet>

		<u-action-sheet :show="showActivity" :actions="activityTypeActions" title="请选择" @close="showActivity = false"
			@select="optionActivity"></u-action-sheet>

	</view>
</template>

<script>
	import {
		playerAdd,
		playerInfo,
		playerEdit,
		orderDetail,
		activityDetail,
		orderEdit
	} from './indexServ.js'
	export default {
		name: 'template',
		data() {
			return {
				btnText1:'提 交',
				dateStr: (new Date()).getMonth() + 1 + '年' + (new Date()).getDate() + '日',
				keyword: '',
				show: false,
				selectIndex: -1,
				orderId: '',
				activityId: 2009,
				activityConfig: [],
				activityTypeActions: [],
				showActivity: false,
				groups: [],
				showOptions: false,
				actions: [],
				showG: false,
				allDetail: {},
				fileName: '',
				assetList: [],
				selectActIndex: 999,

				alertTitle: '温馨提示！',
				alertDescription: '距离截稿日期还有10天。',
				showSex: false,
				showNotify: true,

				actionSexs: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				
				rules: {
								'playName': {
									type: 'string',
									required: true,
									message: '请填写姓名',
									trigger: ['blur', 'change']
								},
								'sex': {
									type: 'string',
									required: true,
									message: '请选择性别',
									trigger: ['blur', 'change']
								},
								'mobile': {
									type: 'string',
									required: true,
									message: '请填写电话',
									trigger: ['blur', 'change']
								},
								'idCard': {
									type: 'string',
									required: true,
									message: '请输入你的身份证号码',
									trigger: ['blur', 'change']
								},
								'prop1': {
									type: 'string',
									required: true,
									message: '请选择你的省市区',
									trigger: ['blur', 'change']
								},
								address: {
									type: 'string',
									required: true,
									message: '请输入你的详细地址',
									trigger: ['blur', 'change']
								},
								activityGroupName: {
									type: 'string',
									required: true,
									message: '请选择你的年龄段',
									trigger: ['blur', 'change']
								},
								activityTypeName: {
									type: 'string',
									required: true,
									message: '请选择你的活动类别',
									trigger: ['blur', 'change']
								},
							},
							
				orderForm: {
					id: null,
					playName: null,
					age: 10,
					sex: null,
					idCard: '',
					mobile: '',
					assetType: '',
					uploadAsset: null,
					activityTypeName: null,
					activityDetailType: null,
					activityGroupName: null,
					orderPayAmount: null,
					orderPayStatus: 1,
					channelId: null,
					openId: null,
					expressNo: null,
					activityConfig: [],
					flowStatus: 0,
					mainId: null,
					nickName: null,
					avatarUrl: null,
					remark: null,
					activityPic: null,
					activityId: null,
					playId: null,
					workTitle: null,
					prop1: null,
					flowStatus:null
				}

			}
		},

		computed: {
			btnClass: function(){
				let s=this.orderForm.flowStatus
				console.log('ss',this.orderForm)
				if(s==4){
					return 'btn-r-disabled'
				}
				return 'btn-r-disabled'
			},
			btnText: function(){
				return '提 交'
			}
		},
		
		onLoad(op) {
			this.orderId = op.orderId
			this.activityId = op.activityId
			this.GET_orderDetail({
				orderId: op.orderId
			})

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)	
		},
		methods: {

			sexSelect(e) {
				this.orderForm.sex = e.name

			},

			/////
			submitOrder() {
				console.log('submitOrder')
				console.log(this.orderForm)
				this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
								this.POST_orderEdit(this.orderForm);
							}).catch(errors => {
								uni.$u.toast('校验失败,请检查你输入的信息。')
							})
				

				
			},
			onActivityConfigChooseFile(index) {
				let that = this
				uni.chooseMessageFile({
					count: 1, //默认100
					type: 'file',
					success: function(res) {
						console.log('上传动态表单文件')
						console.log(res)
						const {
							tempFiles
						} = res
						console.log(tempFiles)
						let {
							path
						} = tempFiles[0]
						uni.uploadFile({
							url: getApp().globalData.envParam.baseURL + '/api/order/upload',
							filePath: path,
							name: 'file',
							formData: {},
							success(res) {
								console.log('---上传动态表单文件--')
								console.log(res)
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data)
									if (!data.url) {
										uni.showToast({
											icon: 'none',
											title: data.msg
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: '上传成功'
										})
										that.orderForm.activityConfig[index].value = data.url
										that.fileName = res.data.originalFilename
										//console.log(that.orderForm.activityConfig)	
									}


								}

							},
							fail(err) {
								console.log(err)
								uni.showToast({
									icon: 'error',
									title: '服务器出现问题'
								})
							}

						})

					},
					fail: function(err) {
						console.log('上传动态表单文件失败，用户取消了上传')
						console.log(err)
					}
				})
			},
			onChooseFile2() {
				let that = this
				uni.chooseMessageFile({
					count: 1, //默认100
					type: 'file',
					success: function(res) {
						console.log('----chooseMessageFile--')
						console.log(res)
						// console.log(JSON.stringify(res.tempFilePaths));
						const {
							tempFiles
						} = res
						console.log(tempFiles)
						console.log(tempFiles[0])
						console.log(tempFiles[0].path)
						let {
							path
						} = tempFiles[0]
						uni.uploadFile({
							url: getApp().globalData.envParam.baseURL + '/api/order/upload',
							filePath: path,
							name: 'file',
							formData: {},
							success(res) {
								console.log('---0990--')
								console.log(res)

								if (res.statusCode == 200) {
									let data = JSON.parse(res.data)
									if (!data.url) {
										uni.showToast({
											icon: 'none',
											title: data.msg
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: '上传成功'
										})
										that.orderForm.uploadAsset = data.url
										//that.fileName = res.data.originalFilename
										//console.log(that.orderForm.activityConfig)	
									}


								}

							},
							fail(err) {
								uni.showToast({
									icon: 'none',
									title: '服务器错误'
								})
								console.log(err)
							}

						})

					},
					fail: function(err) {
						console.log('-----onChooseFile--')
						console.log(err)
					}
				})
			},
			optionSelectG(e) {
				console.log('optionSelectG')
				console.log(e)
				this.orderForm.activityGroupName = e.name
			},
			optionActivity(e) {
				console.log('optionActivity')
				console.log(e)
				this.orderForm.activityTypeName = e.name
				this.selectActIndex = e.index
				this.orderForm.uploadAsset = null;
				this.orderForm.assetType = this.assetList[e.index].name
			},

			optionSelect(e) {
				console.log('动态表单选择')
				console.log(e)
				this.orderForm.activityConfig[this.selectIndex].value = e.value
			},
			onShowOptions(it, index) {
				console.log('--onShowOptions-')
				this.actions = it.options.map((item) => {
					item.name = item.text
					return item
				})
				this.selectIndex = index

				this.showOptions = true
			},
			deletePic(event, index) {
				console.log('---deletePic(event) {--')
				console.log(event)
				this.orderForm.activityConfig[index].value = null
			},
			async afterRead(event, index) {
				console.log('----async afterRead(event) {--')
				console.log(index)
				console.log(event.file)
				let that = this
				uni.uploadFile({
					url: getApp().globalData.envParam.baseURL + '/api/order/upload',
					filePath: event.file[0].url,
					name: 'file',
					formData: {},
					success(res) {
						if (res.statusCode == 200) {
							let d = JSON.parse(res.data)
							console.log(d)
							that.orderForm.activityConfig[index].value = d.url
						}

					}

				})

			},
			async afterRead2(event, index) {
				console.log('----async afterRead(event) {--')
				console.log(index)
				console.log(event.file)
				let that = this
				uni.uploadFile({
					url: getApp().globalData.envParam.baseURL + '/api/order/upload',
					filePath: event.file[0].url,
					name: 'file',
					formData: {},
					success(res) {
						if (res.statusCode == 200) {
							let d = JSON.parse(res.data)
							console.log(d)
							that.orderForm.uploadAsset = d.url
						}

					}

				})

			},
			deletePic2(event, index) {
				console.log('删除orderForm.uploadAsset(event) {--')
				console.log(event)
				this.orderForm.uploadAsset = null
			},
			// orderEdit
			async POST_orderEdit(p) {
				let res = await orderEdit(p)
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功'
					})
				}
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			},

			onAdd() {

				if (this.name == '') {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					})
					return
				}
				if (this.card == '') {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					})
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					})
					return
				}
				if (this.age == '') {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					})
					return
				}
				if (this.shenAddress == '请选择省市区') {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					})
					return
				}
				if (this.xiangAddress == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				let k = {
					"address": this.shenAddress + '--' + this.xiangAddress,
					"age": this.age,
					"idCard": this.card,
					"mobile": this.phone,
					"openId": uni.getStorageSync('openid'),
					"playName": this.name,
					"sex": this.sex,
				}
				if (this.id) {
					this.POST_editPlay({
						id: this.id,
						...k
					})
				} else {
					this.POST_addPlay(k)
				}

			},
			onPickerChange(e) {
				console.log('--onPickerChange-')
				console.log(e.detail.value)
				let arr = e.detail.value
				this.orderForm.prop1 = arr.join('-')
			},
			// activityDetail
			async GET_orderDetail(p) {
				let res = await orderDetail(p)
				if (res.code == 200) {
					console.log('获取订单信息:', res.data)
					this.allDetail = res.data
					this.orderForm = res.data
					console.log(this.orderForm);
					this.GET_activityDetail({
						activityId: this.activityId
					})

				}
			},
			async GET_activityDetail(p) {
				let res = await activityDetail(p)
				if (res.code == 200) {
					this.activityConfig = res.data.activityConfig
					if (this.orderForm.activityConfig.length == 0) {
						this.orderForm.activityConfig = res.data.activityConfig
					}
					let arr = res.data.params.groups.split(',')
					console.log('获取活动信息', res.data)

					this.groups = arr.map((it) => {
						return {
							name: it,
							value: it
						}
					})
					this.activityTypeActions = res.data.activityDetailType?.split(',').map((it, index) => {
						return {
							name: it,
							value: it,
							index: index
						}
					})
					this.assetList = res.data.prop1?.split(',').map((it, index) => {
						return {
							label: it,
							name: it,
							index: index
						}
					})
					// activityTypeName
					console.log(this.groups)
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
	.flie {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		padding: 4rpx 8rpx;
		box-sizing: border-box;
		border-radius: 4rpx;
		border: 1rpx solid #ccc;
		width: 200rpx;
		text-align: center;
	}

	.select {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		// background: pink;
	}

	/deep/ .u-border {
		border-style: none !important;
	}

	page {}

	.container {
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
	}


	.cell {
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		// margin-bottom: 40rpx;
		// padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;

		.cell-top {
			width: 100%;
			background: #fff;
			// padding: 30rpx;
			box-sizing: border-box;
			font-size: 22rpx;
			font-weight: bold;
		}

		.cell-line {
			width: 100%;
			height: 2rpx;
			background: #f4f4f4;
			margin: 30rpx 0;
		}

		.cell-title {
			width: 100%;
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.cell-btns {
			width: 100%;
			align-items: center;
			margin-bottom: 40rpx;
			display: flex;

			.cell-btn {
				width: 320rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background: #f4f4f4;
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #454545;
			}
		}

		.cell-one {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 15px;
			border-bottom: 1rpx solid #d6d7d9;
			margin-bottom: 30rpx;

			.cell-one-txt {
				width: 180rpx;
			}

			.cell-one-op {
				flex: 1;
			}
		}
	}


	.kong {
		width: 100%;
		height: 120rpx;
	}

	.uni-input {}

	.btns {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7fa;
		display: flex;

		.btn-l {
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;

			.money {
				color: #e94f4f;
			}
		}

		.btn-r {
			width: 100%;
			height: 100rpx;
			background: $u-primary;
			border-top: 2rpx solid $u-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
		.btn-r-disabled {
			width: 100%;
			height: 100rpx;
			background: #888888;
			border-top: 2rpx solid #888888;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.u-form {
		padding: 0 30rpx;
		width: 100%;
	}

	.prop1 {
		position: relative;
		width: 100%;
		border: 1px solid #e94f4f;
		z-index: 0;

		.picker {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 80000;
			opacity: 0;
			border: 1px solid #e94f4f;
			height: 50rpx;
		}

		.icon {
			float: right;
		}
	}
</style>